@import "~terriajs-variables";
@import "../../Sass/common/mixins";

$workbench-margin: $padding-small;

.workbench-item {
  background: $dark-with-overlay;
  color: $text-light;
  font-family: $font-pop;
  margin: $workbench-margin 0;
  border: 1px solid $overlay;

  &.workbench-item:global(.ui-sortable-item) {
    cursor: auto;
    float: none;
  }

  .is-open {
    @media (min-width: $sm) {
      .btn--toggle {
        padding-left: 8px;
      }
    }
  }
}

.inner {
  composes: clearfix from "../../Sass/common/_base.scss";
  padding: $padding;
  border-top: 1px solid $border-color;
  img {
    max-width: 100%;
    height: auto;
  }
}

.header {
  composes: list-reset from "../../Sass/common/_base.scss";
  width: 100%;
}

.header-clearfix {
  composes: clearfix from "../../Sass/common/_base.scss";
}

.visibilityColumn {
  composes: col from "../../Sass/common/_base.scss";
  composes: col-1 from "../../Sass/common/_base.scss";
  padding: 8px 10px;
  //remove additional space below inline element
  button {
    display: block;
  }
  svg {
    height: 14px;
    width: 14px;
    fill: #fff;
  }
}

.btn-visibility {
  composes: btn from "../../Sass/common/_buttons.scss";
}

.nameColumn {
  composes: col from "../../Sass/common/_base.scss";
  composes: col-10 from "../../Sass/common/_base.scss";
  padding: 5px;
  text-align: left;
}

.toggleColumn {
  composes: col from "../../Sass/common/_base.scss";
  composes: col-1 from "../../Sass/common/_base.scss";
  padding: 5px;
  //remove additional space below inline element
  svg {
    height: 18px;
    width: 18px;
    fill: #fff;
  }
}

.btn-toggle {
  composes: btn from "../../Sass/common/_buttons.scss";
  display: block;
}

.iconLineChart {
  float: left;
  font-size: 140%;
  margin-right: 5px;
  svg {
    height: 18px;
    width: 18px;
    fill: #ccc;
    display: inline-block;
    vertical-align: top;
  }
}

.draggable {
  font-size: $font-size-mid-small;
  cursor: move;
}
